<i18n locale="en" lang="yaml">
andMoreConfigs: 'and {n} more config | and {n} more configs'
andMoreUsers : 'and {n} more user | and {n} more users'
</i18n>

<i18n locale="zh-CN" lang="yaml">
Auth Type: 认证类型
Config   : 配置
No config: 未配置

andMoreConfigs: '以及其他 {n} 项目配置'
andMoreUsers: '以及其他 {n} 个用户'

API Auth deleted: API认证已删除

No API Auth has ever been added: 从未添加过任何 API 认证

Are you sure you want to delete the API Auth?: 是否确认删除此 API 认证？

Sync and Async APIs can be accessed without authentication by default             : 同步、异步 API 在默认情况下不需要认证即可访问
If you need to enhance security, you can create API Auth for Sync and Async APIs. : 如需要增强安全性，可以为同步、异步创建 API 认证
</i18n>

<!-- Generated by OpenCC START -->
<i18n locale="zh-HK" lang="yaml">
API Auth deleted: API認證已刪除
Are you sure you want to delete the API Auth?: 是否確認刪除此 API 認證？
Auth Type: 認證類型
Config: 配置
If you need to enhance security, you can create API Auth for Sync and Async APIs.: 如需要增強安全性，可以為同步、異步創建 API 認證
No API Auth has ever been added: 從未添加過任何 API 認證
No config: 未配置
Sync and Async APIs can be accessed without authentication by default: 同步、異步 API 在默認情況下不需要認證即可訪問
andMoreConfigs: 以及其他 {n} 項目配置
andMoreUsers: 以及其他 {n} 個用户
</i18n>
<i18n locale="zh-TW" lang="yaml">
API Auth deleted: API認證已刪除
Are you sure you want to delete the API Auth?: 是否確認刪除此 API 認證？
Auth Type: 認證型別
Config: 配置
If you need to enhance security, you can create API Auth for Sync and Async APIs.: 如需要增強安全性，可以為同步、非同步建立 API 認證
No API Auth has ever been added: 從未新增過任何 API 認證
No config: 未配置
Sync and Async APIs can be accessed without authentication by default: 同步、非同步 API 在預設情況下不需要認證即可訪問
andMoreConfigs: 以及其他 {n} 專案配置
andMoreUsers: 以及其他 {n} 個使用者
</i18n>
<!-- Generated by OpenCC END -->

<template>
  <transition name="fade">
    <el-container direction="vertical" v-show="$store.state.isLoaded">
      <!-- Header area -->
      <el-header height="60px">
        <div class="common-page-header">
          <h1>{{ $t('API Auth') }}</h1>
          <div class="header-control">
            <FuzzySearchInput :dataFilter="dataFilter"></FuzzySearchInput>

            <el-button @click="openSetup(null, 'add')" type="primary" size="small">
              <i class="fa fa-fw fa-plus"></i>
              {{ $t('New') }}
            </el-button>
          </div>
        </div>
      </el-header>

      <!-- List area -->
      <el-main class="common-table-container">
        <div class="no-data-area" v-if="T.isNothing(data)">
          <h1 class="no-data-title" v-if="T.isPageFiltered()"><i class="fa fa-fw fa-search"></i>{{ $t('No matched data found') }}</h1>
          <h1 class="no-data-title" v-else><i class="fa fa-fw fa-info-circle"></i>{{ $t('No API Auth has ever been added') }}</h1>

          <p class="no-data-tip">
            {{ $t('Sync and Async APIs can be accessed without authentication by default') }}
            <br>{{ $t('If you need to enhance security, you can create API Auth for Sync and Async APIs.') }}
          </p>
        </div>
        <el-table v-else
          class="common-table" height="100%"
          :data="data"
          :row-class-name="common.getHighlightRowCSS">

          <el-table-column :label="$t('Title')">
            <template slot-scope="scope">
              {{ scope.row.title || scope.row.func_title }}
              <template v-if="scope.row.note">
                <br>
                <span class="text-info">&#12288;{{ $t('Note') }}{{ $t(':') }}</span>
                <span>{{ scope.row.note }}</span>
              </template>
            </template>
          </el-table-column>

          <el-table-column :label="$t('Auth Type')" width="200">
            <template slot-scope="scope">
              {{ C.API_AUTH_MAP.get(scope.row.type).name }}
            </template>
          </el-table-column>

          <el-table-column :label="$t('Config')">
            <template slot-scope="scope">
              <span v-if="scope.row.type === 'fixedField'">
                <span class="text-bad" v-if="T.isNothing(scope.row.configJSON.fields)">
                  {{ $t('No config') }}
                </span>
                <span v-else>
                  {{ C.API_AUTH_FIXED_FIELD_LOCATION_MAP.get(scope.row.configJSON.fields[0].location).name }}
                  <code class="text-main">{{ scope.row.configJSON.fields[0].name }}</code>

                  <span class="more-configs-tip" v-if="scope.row.configJSON.fields.length > 1">
                    <br>&#12288;
                    {{ $tc('andMoreConfigs', scope.row.configJSON.fields.length - 1) }}
                  </span>
                </span>
              </span>

              <span v-else-if="scope.row.type === 'httpBasic' || scope.row.type === 'httpDigest'">
                <span class="text-bad" v-if="T.isNothing(scope.row.configJSON.users)">
                  {{ $t('No config') }}
                </span>
                <span v-else>
                  {{ $t('User') }}
                  <code class="text-main">{{ scope.row.configJSON.users[0].username }}</code>
                  <span class="more-configs-tip" v-if="scope.row.configJSON.users.length > 1">
                    <br>&#12288;
                    {{ $tc('andMoreUsers', scope.row.configJSON.users.length - 1) }}
                  </span>
                </span>
              </span>

              <template v-else-if="scope.row.type === 'func'">
                <FuncInfo
                  :config-func-id="scope.row.funcId"
                  :id="scope.row.func_id"
                  :title="scope.row.func_title" />
              </template>
            </template>
          </el-table-column>

          <el-table-column align="right" width="300">
            <template slot-scope="scope">
              <el-link @click="openSetup(scope.row, 'setup')">{{ $t('Setup') }}</el-link>
              <el-link type="danger" @click="quickSubmitData(scope.row, 'delete')">{{ $t('Delete') }}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

      <!-- Paging area -->
      <Pager :pageInfo="pageInfo" />
      <APIAuthSetup ref="setup" />
    </el-container>
  </transition>
</template>

<script>
import APIAuthSetup from '@/components/Management/APIAuthSetup'

export default {
  name: 'APIAuthList',
  components: {
    APIAuthSetup,
  },
  watch: {
    $route: {
      immediate: true,
      async handler(to, from) {
        await this.loadData();
      }
    },
    '$store.state.isLoaded': function(val) {
      if (!val) return;

      setImmediate(() => this.T.autoScrollTable());
    },
  },
  methods: {
    async loadData() {
      let _listQuery = this.dataFilter = this.T.createListQuery();

      let apiRes = await this.T.callAPI_get('/api/v1/api-auth/do/list', {
        query: _listQuery,
      });
      if (!apiRes || !apiRes.ok) return;

      this.data = apiRes.data;
      this.pageInfo = apiRes.pageInfo;

      this.$store.commit('updateLoadStatus', true);
    },
    async quickSubmitData(d, operation) {
      switch(operation) {
        case 'delete':
          if (!await this.T.confirm(this.$t('Are you sure you want to delete the API Auth?'))) return;
          break;
      }

      let apiRes = null;
      switch(operation) {
        case 'delete':
          apiRes = await this.T.callAPI('/api/v1/api-auth/:id/do/delete', {
            params  : { id: d.id },
            feedback: { okMessage: this.$t('API Auth deleted') },
          });
          break;
      }
      if (!apiRes || !apiRes.ok) return;

      this.$store.commit('updateHighlightedTableDataId', d.id);

      await this.loadData();
    },
    openSetup(d, target) {
      switch(target) {
        case 'add':
          this.$refs.setup.loadData();
          break;

        case 'setup':
          this.$store.commit('updateHighlightedTableDataId', d.id);
          this.$refs.setup.loadData(d.id);
          break;
      }
    },
  },
  computed: {
  },
  props: {
  },
  data() {
    let _pageInfo   = this.T.createPageInfo();
    let _dataFilter = this.T.createListQuery();

    return {
      data    : [],
      pageInfo: _pageInfo,

      dataFilter: {
        _fuzzySearch: _dataFilter._fuzzySearch,
      },
    }
  },
  created() {
    this.$root.$on('reload.apiAuthList', this.loadData);
  },
  destroyed() {
    this.$root.$off('reload.apiAuthList');
  },
}
</script>

<style scoped>
.more-configs-tip {
  font-style: italic;
  color: #aaa;
}
</style>

<style>
</style>
